<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>我们的爱情</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>

    <link href="css/sty.css" rel="stylesheet" />
    <link href="css/one.css" rel="stylesheet" />

    <!--照片墙-->
    <!--必要样式-->
    <link href="css/photopile.css" rel="stylesheet">
    <link rel="stylesheet" href="css/animate.css">
    <!--百度统计，其他人可删-->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?49c9e828e38545414078413b222513c4";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body class="body">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"
     data-anijs="if: mouseover, do: bounceIn animated"
     style="background-color: #f99ec7 !important;box-shadow: 0 0 2px 0 #acacac;">
    <img class="pull-left" style="display: inline-block !important;margin: 10px 25px 10px 60px"
         src="images/logo.png" title="">
    <div class="col-xs-8 text-center txt" data-bind="">
        陪伴是最长情的告白，无论生老病死，我都愿陪你到天荒地老
    </div>
</nav>
<div class="container-fluid" style="margin-top: 88px">
    <div id="begin" class="col-xs-12 text-center txt underline" data-anijs="if: mouseover, do: swing animated" >
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的遇见，是爱情的开始</h2>
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的爱情，是幸福的开始</h2>
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的幸福，是平平淡淡的陪伴</h2>
    </div>
    <span class="wow fadeInUp animated col-xs-12 text-center" data-wow-delay="0.7s" style="color: rgb(239, 106, 138);
         visibility: visible; animation-delay: 0.7s; animation-name: fadeInUp;margin: 15px auto;font-size: 16px">
        ♥ 2019-08-14 ♥</span>
    <div class="col-xs-12">
            <div class="col-xs-6 text-right"
                 data-anijs="if: click, do: rollOut animated, to: .boy, after: $removeAnim">
                <ul class="ch-grid man wow flipInX animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
                    <li class="boy">
                        <img src="images/boy.png" alt="">

                    </li>
                </ul>
            </div>
            <div class="and">&</div>
            <div class="col-xs-6 text-left"
                 data-anijs="if: click, do: rollIn animated, to: .girl, after: $removeAnim">
                <ul class="ch-grid woman wow flipInX animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: flipInX;">
                    <li class="girl">
                        <img src="images/girl.png" alt="">
                    </li>
                </ul>
            </div>
    </div>
    <div class="col-xs-12 text-center txt underline">
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的爱情历程</h2>
    </div>

    <div id="dslc-module-4" class=" dslc-module-Pluton_Time_Line dslc-in-viewport-check dslc-in-viewport-anim-none   dslc-module-handle-like-regular dslc-in-viewport" data-module-id="4" data-dslc-module-id="Pluton_Time_Line" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="" style="animation: forwards 0.65s ease 0s 1 normal none running;">
        <div class="ilove_timeline">
            <div class="col-md-12">
                <ul class="timeline col-xs-12" >
                    <li class="col-xs-12" data-anijs="if: scroll, on: window, do: slideInLeft   animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s"
                             style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x1.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div  >
                                        <p class="txtcolor"> 那一天，微信上第一次给你打招呼
                                            你回应的第一句话洋哥好棒，
                                            历历在目，脑海中情不自禁的幻想着手机另一边的她是什么模样</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2019年08月01日22时02分</div>
                            </div>
                        </div>
                    </li>
                    <li class="timeline-inverted  col-xs-12" data-anijs="if: scroll, on: window, do: slideInRight animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: right">
                                <img src="images/x2.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 135px 0 15px">

                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">你在宏村，我在上海，我们开启了第一次视频之旅，视频中的你好像有点略显紧张，坐下来时腿无意识的向前方踢着，过程中我们天南海北的聊着，一共聊了四十分钟，最后意犹未尽的结束</p>
                                    </div>
                                </div>
                            </div>
                            <div class="timeline-foot">2019年08月07日23时17分</div>
                                </div>
                        </div>
                    </li>
                    <li class=" col-xs-12" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x3.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">这一天的晚上你夜游了宏村，透过你的相机看到了晚上的宏村风景，虽然景色没有看到多少，但与你聊天感觉很快乐，而且这天晚上你告诉了我你的电话号码</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2019年08月08日晚</div>
                                </div>
                        </div>
                    </li>
                    <li class="timeline-inverted  col-xs-12" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
                        <div class="timeline-badge wow fadeInUp animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft animated" data-wow-delay="0.7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInLeft;">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: right">
                                <img src="images/x4.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 135px 0 15px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>

                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">这天早上，我第一次拨通了你的电话，叫你起床。收拾完毕后，我们视频到八点，你带我看到早上的宏村是如此美丽，早上素颜的你也是如此之漂亮</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2019年08月09日05时52分</div>
                                </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class=" col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x5.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                            <div class="timeline-heading">
                                <p><br></p>
                            </div>
                            <div class="timeline-body">
                                <div >
                                    <div >
                                        <p class="txtcolor">这一刻，正式见到了你，你比我想象中的还要漂亮，我的心在快速的跳动着，我笨拙地说出早先记住的情话，但随后紧张的我看到递电影票给检票员的时候，竟然忘了取回，还是贴心的你帮忙取回</p>
                                    </div>
                                </div>
                            </div>
                                <div class="timeline-foot">2019年08月11日16时20分</div>
                                </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x6.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">这天晚上一起走甜爱路的时候，我鼓起了全部勇气去牵你的手，我虽然知道这么做很突然，但我想这应该算一种隐晦的表白吧，忐忑不安中</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2019年08月11日晚</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x7.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div>
                                            <p class="txtcolor">这天下午知道了下月13日是中秋节，我忐忑的问你，是否相约出去旅行，你同意了。心情快乐中</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2019年8月12日</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x8.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">这天晚上我们聊了许多关于旅行的计划，各抒己见。但是临近结束的时候，你说你是慢热型的，我的太着急会让你害怕。结束后我想了好久好久，发现我好像是比较着急，我的喜欢反而给了你压力。我总担心如果像你这么优秀的女孩子如果不早点成为我的女朋友的话，会被别人抢走。后续希望我们未来的关系如水到渠成般，无需多言，自然而然确定关系</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2019年8月13日晚</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class=" col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x9.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div >
                                            <p class="txtcolor">今天晚上预计应该会一起吃晚饭，一起走在街上，也许是天南海北的聊着，但这应该是幸福的样子吧</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">2019年08月14日晚</div>
                            </div>
                        </div>
                    </li>
                    <li data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat"  class="timeline-inverted  col-xs-12">
                        <div class="timeline-badge wow fadeInUp" data-wow-delay="0.5s" style="">
                            <i> ♥ </i>
                        </div>
                        <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.7s" style="">
                            <div  class="" style="padding: 0;width: 102px;position: relative;float: left">
                                <img src="images/x10.png" alt="" style="width: 102px;height: 102px">
                            </div>
                            <div class="" style="padding: 0 15px 0 135px">
                                <div class="timeline-heading">
                                    <p><br></p>
                                </div>
                                <div class="timeline-body">
                                    <div >
                                        <div>
                                            <p class="txtcolor">我们的故事，未完待续</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="timeline-foot">以后</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="col-xs-12 text-center txt underline">
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的山盟海誓</h2>
    </div>
    <div class="col-xs-12 text-center "
         data-anijs="if: scroll,on: window,do: zoomInDown animated, before: $scrollReveal repeat">
        <span class="col-xs-12" style="font-family: 'Great Vibes',cursive;color: #283a44; font-size: 20px;
        margin: 15px;padding: 15px;line-height: 33px">
            与你的相遇，是命中注定的一生一世。与你的相爱，是命中注定的地老天荒<br>
            今生携手徜徉天地间，为你遮风挡雨，相濡以沫，并肩悠游滚滚红尘中<br>
            即使有一天，你的步履变得蹒跚，青丝变成白发，红润的脸上爬满了皱纹，但我仍要携着你的手，漫步在夕阳的余辉下<br>
　　     你，我一生最爱的人;你，我一生最想的人;你，我一生守候的人;你，我一生唯一的人<br>
           不论你生病或是健康、富有或贫穷，始终忠於你，直到离开世界
　</span>
    </div>

    <div class="col-xs-12 text-center txt underline">
        <h2 class="col-xs-12" style="font-family: 'Great Vibes',cursive;
    color: #283a44; padding-bottom: 0px;">我们的爱情见证</h2>
    </div>

    <div class="photopile-wrapper col-xs-12 text-center" data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
        <ul class="photopile col-xs-12">
            <li>
                <a href="images/p1.jpg">
                    <img src="images/p1_s.jpg"
                         alt="第一次聊天"  />
                </a>
            </li>
            <li>
                <a href="images/p2.jpg">
                    <img src="images/p2_s.jpg"
                         alt="第一次朋友圈出现我的痕迹"  />
                </a>
            </li>
        </ul>
    </div>

    <p class="text-center" style="font-size: 10px">照片墙的照片禁止转载</p>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/photopile.js"></script>
    <script type="text/javascript">
        $(function(){
            PhotoPile().scatter();
        });
    </script>
</div>
<audio id="bgmMusic" src="faded.mp3" preload="auto" type="audio/mp3" autoplay="" loop=""></audio>
<script src="js/anijs-min.js"></script>
<script src="js/anijs-helper-scrollreveal-min.js"></script>
<script src="js/flu.js" type="text/javascript"></script>
<div class="heart "  rel="like" style=" height:130px;
    width:130px;">
    <p id="pClick" style="text-align: center;font-size: 10px;margin-bottom: 0px;
    margin-top: 85px;">点赞接受</p>
    <div class="heartCa"></div></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('body').on("click",'.heart',function(){
            $(this).css("background-position","")
            $(this).addClass("heartAnimation");
            $(this).addClass("clickH");
            $('#pClick').addClass('tC');
            setTimeout(function () {
                $(".heart").removeClass('heartAnimation');
            }, 1000);
        });
    });
</script>
</body>
</html>